<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>书籍借阅页面</title>
        <script src="../../js/jquery-3.4.1.min.js" charset="utf-8"></script>
        <script src="../../layuilay/layui.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../../layuilay/css/layui.css"  media="all">
</head>
<body>


        <!-- 检索框开始———————————————————— -->
        <div class="layuimini-container">
            <div class="layuimini-main">
                <fieldset class="layui-elem-field layuimini-search">
                    <legend>搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">账号：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="selid" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">姓名：</label> 
                                    <div class="layui-input-inline">
                                        <input type="text" id="selreaname"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">书名</label> 
                                    <div class="layui-input-inline">
                                        <input type="text" id="selbokname"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="searchBtn()"><i class="layui-icon">&#xe615</i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
    
            <!-- 检索框结束 -->
            <!-- 数据表格开始———————————————————— -->

            <table id="demo" lay-filter="test"></table>
            
        </div>
    </div>
    <!-- 数据表格结束 -->
        <script type="text/html" id="barDemo">



{{#  if(d.isback < 1){ }}

    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="backbook">归还</a>
  {{#  } else { }}
    
  {{#  } }}






        </script>
<!-- 渲染表格开始—————————————— -->
<script>
var tableObj,uindex,sindex;
$(function(){
    searchBtn();
    })
    function searchBtn(){
           var selid=$("#selid").val();
           var selreaname=$("#selreaname").val();
           var selbokname=$("#selbokname").val();
           if(selid==''){
        	   selid = 0;
               }
layui.use(['table','jquery','upload','layer','form'], function(){
    var table = layui.table;
    var $ = layui.$;
    var upload = layui.upload;
    var layer = layui.layer;
    var form = layui.form;
   
    tableObj=table.render({
     elem: '#demo'
     ,url:'/findByBooknameAndReaName'
     ,toolbar: '#toolbarDemo'
     ,cellMinWidth: 90
     ,where:{
    	 readerid:selid,
    	 readername:selreaname,
    	 bookname:selbokname
    	 
     } 
     ,cols: [[
         {field:'sernum', title: '借阅编号', sort: true}
         ,{field:'readerid',title: '姓名ID'}
         ,{field:'readername',title: '姓名'}
         ,{field:'bookname',  title: '书名'}
         ,{field:'lenddate',  title: '借书日期'}
         ,{field:'backdate',  title: '预计归还日期'}
         ,{field:'realdate',  title: '实际归还日期'}
         ,{field:'isoverdue',  title: '是否逾期'}
         ,{field:'overduefees',  title: '逾期费用'}
         ,{field:'isback',  title: '状态',templet:showStatus}
         ,{fixed: 'right', title: '操作', align:'center', toolbar: '#barDemo'} 
         
     ]]
   ,page: true
   });

    table.on('tool(test)', function(obj){
        var data = obj.data;  // 获得当前行数据
        var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的event 参数对应的值）
       if(obj.event === 'backbook'){
    	    var myDate = new Date();
    	    var yea = myDate.getFullYear(); 
    	    var mon = myDate.getMonth()+1;   
    	    var dat = myDate.getDate();    
    	    var backdate =yea+"-"+mon+"-"+dat;//当前还书时的日期
    	    var readerid = data.readerid;//读者id
    	    var bookid = data.bookid;//图书id
    	    var sernum = data.sernum;//借阅id
            var number = 1;//数量
            
           layer.confirm('确定归还吗？', function(index){
        	   //do something
        	   //修图书
        	   $.ajax({
                url:"/updateByBookNumber"
                ,data:{
                	number:number,
        	        book_id:bookid
                    }
                ,dataType:"json"
                ,type:"POST"
                ,success:function(res){
                    if(res.success){
                        //修人员
                        $.ajax({
		                url:"/updateByGiveBook"
		                ,data:{
		                	givenbook:number,
		                	bigbook:number,
		                	id:readerid
			                }
		                ,dataType:"json"
		                ,type:"POST"
		                ,success:function(res){
		                    if(res.success){
		                    	$.ajax({
		                            url:"/updateByBackBookDate"
		                            ,data:{
		                            	realdate:backdate,
		                            	isback:number,
		                            	sernum:sernum
			                            }
		                            ,dataType:"json"
		                            ,type:"POST"
		                            ,success:function(res){
		                                if(res.success){
		                                    layer.msg("归还成功");
		                                    tableObj.reload();
		                                    }
		                                }
		                            })
		                        }
		                    }
		                })
                        
                        }
                    }
                })
        	   layer.close(index);
           });
       }
    })
 });
}

</script>
<!-- 渲染表格结束-->
<!-- 还书窗体 -->
<div  id="backbook" style="display:none">

<form class="layui-form" action="" lay-filter="fn" id="my_question">
          <div class="layui-form-item" style="display: none;">
                <label class="layui-form-label">数量：</label>
                <div class="layui-input-inline">
                  <input type="text" disabled="disabled"  id="backnumber"  value="1" placeholder="" autocomplete="off" class="layui-input">
                </div>
          </div>
              <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button type="submit" class="layui-btn" onclick="stubtn()" >确定</button>
			      <button type="reset" class="layui-btn layui-btn-primary">取消</button>
			    </div>
			  </div>
          </form>
</div>
<script type="text/javascript">
/* function stubtn(data){
	var data = obj.data;  // 获得当前行数据
    var layEvent = obj.event;
	var myDate = new Date();
    var yea = myDate.getFullYear();    // 获取完整的年份(4位,1970-????)
    var mon = myDate.getMonth()+1;       // 获取当前月份(0-11,0代表1月)
    var dat = myDate.getDate();        // 获取当前日(1-31)
    var backdate =yea+"-"+mon+"-"+dat;//当前还书时的日期
    var checkStatus = data.readerid;
    alert(checkStatus);
	
} */


function showStatus(data) {
    var status = data.isback;
    var result;
    if (status == 0) {
        result = '<a class="" style="color:#FF5722">未还</a>';
    }
    if (status == 1) {
        result = '<a class="" style="color:#009688">已还</a>';
    }
    return result;
}
</script>


</body>
</html>